<template>
  <div class="content">
    <h1>一个小彩蛋</h1>
    <div class="image-content">
      <img :src="require('../static/image'+luckyNumber+'.png')"/>
    </div>
    <div class="lucky-numbers" v-if="luckyNumbers.length>0">
      <img v-for="number in luckyNumbers" v-bind:key="number" :src="require('../static/image'+number+'.png')"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'lucky-number',
  data(){
    return {
      numberInterval:null,
      luckyNumber:1,
      luckyNumbers:[],
      running:false
    }
  },
  methods:{
    doing(){
      this.running=true;
      if(this.numberInterval!=null){
        clearInterval(this.numberInterval);
      }
      this.numberInterval=setInterval(()=>{
        this.luckyNumber=parseInt(Math.random()*(40-1+1)+1,10)
      },100);
    },
    stop(){
      this.running=false;
      console.log("stop function running");
      clearInterval(this.numberInterval);
      this.pickup();
    },
    pickup(){
      if(this.luckyNumbers.length==5){
        this.luckyNumbers=[];
      }
      this.luckyNumbers.push(this.luckyNumber);
    }
  },
  created() {
    document.onkeypress=(key)=>{
      if(key.code=='Space' || key.code=='Enter'){
        console.log("键盘事件",key);
        if(this.running){
          this.stop();
        }else{
          this.doing();
        }
      }
    }
    this.doing()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{
  width:80%;
  height:100%;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content h1{
  font-size:260%;
  margin:0px auto;
}
.image-content{
  width:80%;
  margin-top:0px;
}
.image-content img{
  width:90%;
}
.lucky-numbers{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  margin-top:25px;
  border-top:1px solid rgba(99,99,99,0.5);
}
.lucky-numbers img{
  width:200px;
  border:1px solid rgba(180,180,180,0.8);
  border-radius: 10px;
  margin:10px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
</style>
